สำรวจพลังของ CSS Extend เพื่อการนำสไตล์กลับมาใช้ใหม่และการสืบทอดอย่างมีประสิทธิภาพ เรียนรู้วิธีการใช้งานและปรับปรุง CSS ของคุณเพื่อการออกแบบที่ขยายขนาดได้และบำรุงรักษาง่าย
ปลดล็อกประสิทธิภาพด้วย CSS Extend: เชี่ยวชาญการสืบทอดสไตล์เพื่อการออกแบบที่ขยายขนาดได้
ในโลกของการพัฒนาเว็บที่เปลี่ยนแปลงตลอดเวลา การเขียน CSS ที่มีประสิทธิภาพและบำรุงรักษาง่ายถือเป็นสิ่งสำคัญอย่างยิ่ง เมื่อโปรเจกต์มีความซับซ้อนมากขึ้น ความต้องการระบบที่แข็งแกร่งในการจัดการสไตล์ก็ยิ่งมีความสำคัญมากขึ้น หนึ่งในเครื่องมือที่ทรงพลังในคลังแสง CSS ของคุณคือแนวคิดของ "Extend" ซึ่งช่วยอำนวยความสะดวกในการสืบทอดสไตล์และส่งเสริมการใช้โค้ดซ้ำ บทความนี้จะเจาะลึกเกี่ยวกับกฎ CSS Extend สำรวจการนำไปใช้ ประโยชน์ และแนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างการออกแบบที่ขยายขนาดได้และบำรุงรักษาง่าย
CSS Extend คืออะไร?
CSS Extend ซึ่งโดยหลักแล้วเกี่ยวข้องกับ CSS preprocessors เช่น Sass และ Less เป็นกลไกที่ช่วยให้สามารถสืบทอดสไตล์จาก selector หนึ่งไปยังอีก selector หนึ่งได้ ซึ่งแตกต่างจากการสืบทอดสไตล์แบบดั้งเดิมของ CSS ที่จะใช้สไตล์ไล่ลงไปตาม DOM tree แต่ Extend ช่วยให้คุณสามารถนำกฎสไตล์ที่มีอยู่มาใช้ซ้ำภายในโค้ดเบส CSS ของคุณได้อย่างชัดเจน สิ่งนี้นำไปสู่ CSS ที่สะอาดขึ้น มีการจัดระเบียบที่ดีขึ้น และลดความซ้ำซ้อน
แม้ว่า CSS แบบดั้งเดิมจะไม่มีคำสั่งที่เทียบเท่าโดยตรงกับคำสั่ง `@extend` ของ Sass หรือ Less แต่หลักการของการนำสไตล์กลับมาใช้ใหม่และการประกอบสไตล์สามารถทำได้ผ่านวิธีอื่น ๆ เช่น CSS variables, mixins (ผ่าน preprocessors) และตัว cascade เอง เราจะสำรวจว่าแนวคิดเหล่านี้เกี่ยวข้องกับกระบวนทัศน์ของ Extend อย่างไร
ทำไมต้องใช้ CSS Extend?
- ลดความซ้ำซ้อนของโค้ด: Extend ช่วยลด CSS ที่ซ้ำซ้อนโดยอนุญาตให้คุณสืบทอดสไตล์จากกฎที่มีอยู่แล้ว ซึ่งช่วยลดขนาดโดยรวมของ stylesheets ของคุณ
- เพิ่มความสามารถในการบำรุงรักษา: เมื่อคุณต้องการแก้ไขสไตล์ คุณเพียงแค่ต้องเปลี่ยนในที่เดียว และ selectors ทั้งหมดที่ extend มันจะได้รับการเปลี่ยนแปลงโดยอัตโนมัติ ซึ่งช่วยให้การบำรุงรักษาง่ายขึ้นและลดความเสี่ยงของความไม่สอดคล้องกัน
- ปรับปรุงการจัดระเบียบ: ด้วยการสร้างลำดับชั้นของสไตล์ที่ชัดเจน Extend ช่วยจัดระเบียบ CSS ของคุณและทำให้ง่ายต่อการทำความเข้าใจและนำทาง
- ส่งเสริมความสามารถในการขยายขนาด: เมื่อโปรเจกต์ของคุณเติบโตขึ้น Extend ช่วยให้คุณสร้างสถาปัตยกรรม CSS แบบโมดูลาร์และขยายขนาดได้ ทำให้มั่นใจได้ว่าสไตล์ของคุณยังคงจัดการได้และมีประสิทธิภาพ
การใช้งานกับ Sass
Sass มีคำสั่ง `@extend` ซึ่งช่วยให้คุณสามารถสืบทอดสไตล์ของ selector หนึ่งไปยังอีก selector หนึ่งได้ นี่คือตัวอย่างพื้นฐาน:
.button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
}
.primary-button {
@extend .button;
background-color: #28a745;
}
ในตัวอย่างนี้ `.primary-button` จะสืบทอดสไตล์ทั้งหมดจาก `.button` แล้วเขียนทับ `background-color` CSS ที่คอมไพล์แล้วจะมีลักษณะดังนี้:
.button, .primary-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
}
.primary-button {
background-color: #28a745;
}
Placeholder Selectors
Sass ยังมี placeholder selectors (`%`) ซึ่งถูกออกแบบมาโดยเฉพาะเพื่อใช้กับ `@extend` โดย Placeholder selectors จะไม่ถูกคอมไพล์เป็น CSS เว้นแต่จะถูก extend โดย selector อื่น สิ่งนี้มีประโยชน์สำหรับการสร้างสไตล์พื้นฐานที่คุณไม่ต้องการนำไปใช้กับองค์ประกอบใด ๆ โดยตรง
%base-heading {
font-family: sans-serif;
font-weight: bold;
}
h1 {
@extend %base-heading;
font-size: 2em;
}
h2 {
@extend %base-heading;
font-size: 1.5em;
}
การใช้งานกับ Less
Less มีฟังก์ชันที่คล้ายกันโดยใช้ pseudo-class `:extend()` นี่คือวิธีที่คุณสามารถบรรลุผลลัพธ์เดียวกันกับตัวอย่าง Sass ข้างต้น:
.button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
}
.primary-button:extend(.button) {
background-color: #28a745;
}
CSS ที่คอมไพล์แล้วจะมีลักษณะคล้ายกับตัวอย่างของ Sass โดยที่ `.button` และ `.primary-button` จะใช้สไตล์ร่วมกัน
CSS Variables และ Cascade เป็นทางเลือก
แม้ว่า Sass และ Less จะมีคำสั่ง Extend ที่ชัดเจน แต่ CSS สมัยใหม่ก็มีกลไกทางเลือกเพื่อให้ได้ผลลัพธ์ที่คล้ายคลึงกัน โดยเฉพาะในสถานการณ์ที่ง่ายกว่า CSS variables (custom properties) และความเข้าใจอย่างลึกซึ้งเกี่ยวกับ cascade สามารถลดความซ้ำซ้อนของโค้ดได้อย่างมาก
CSS Variables
CSS variables ช่วยให้คุณสามารถกำหนดค่าที่สามารถนำกลับมาใช้ใหม่ได้ทั่วทั้ง stylesheet ของคุณ แม้ว่าจะไม่ได้สืบทอดสไตล์โดยตรงในลักษณะเดียวกับ `@extend` แต่ก็เป็นวิธีที่ทรงพลังในการจัดการค่าที่ใช้ร่วมกัน ตัวอย่างเช่น:
:root {
--button-padding: 10px 20px;
--button-border: none;
--button-radius: 5px;
--button-background: #007bff;
--button-color: white;
}
.button {
padding: var(--button-padding);
border: var(--button-border);
border-radius: var(--button-radius);
background-color: var(--button-background);
color: var(--button-color);
cursor: pointer;
}
.primary-button {
padding: var(--button-padding);
border: var(--button-border);
border-radius: var(--button-radius);
background-color: #28a745;
color: var(--button-color);
cursor: pointer;
}
ในกรณีนี้ การเปลี่ยนค่าของตัวแปรจะเปลี่ยนทุกอินสแตนซ์ที่ใช้ตัวแปรนั้น ซึ่งเป็นการควบคุมแบบรวมศูนย์ในรูปแบบที่คล้ายกับการ extend ลองพิจารณาการเปลี่ยนแปลงต่อไปนี้:
:root {
--base-button-style: {
padding: 10px 20px;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}
}
.button {
--button-background: #007bff;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: var(--button-background);
color: white;
cursor: pointer;
}
.primary-button {
--button-background: #28a745;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: var(--button-background);
color: white;
cursor: pointer;
}
โค้ดก่อนหน้านี้ไม่ทำงาน CSS variables ไม่สามารถเก็บคุณสมบัติ CSS หลายรายการเช่นนี้ได้ สิ่งสำคัญคือต้องจำไว้ว่า CSS variables เก็บค่าคุณสมบัติได้เพียงค่าเดียวเท่านั้น
The Cascade
ตัว cascade เองก็เป็นรูปแบบหนึ่งของการสืบทอด ด้วยการใช้สไตล์กับองค์ประกอบหลักอย่างมีกลยุทธ์ คุณสามารถสร้างชุดสไตล์พื้นฐานที่สืบทอดโดยองค์ประกอบย่อยได้ ซึ่งสามารถใช้ร่วมกับ CSS variables เพื่อสร้างระบบที่ยืดหยุ่นและบำรุงรักษาง่าย
แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ CSS Extend
- ใช้ Placeholder Selectors: เมื่อสร้างสไตล์พื้นฐาน ให้ใช้ placeholder selectors (`%` ใน Sass) เพื่อป้องกันไม่ให้ถูกคอมไพล์เป็น CSS โดยตรง
- หลีกเลี่ยงการ Over-Extending: การ extend สไตล์มากเกินไปอาจนำไปสู่ CSS ที่ซับซ้อนและเข้าใจยาก ควรใช้ Extend อย่างรอบคอบและพิจารณาแนวทางทางเลือก เช่น mixins หรือ CSS variables เมื่อเหมาะสม
- รักษาลำดับชั้นที่ชัดเจน: จัดระเบียบ CSS ของคุณอย่างมีตรรกะ โดยให้สไตล์พื้นฐานอยู่ด้านบนและสไตล์ที่เฉพาะเจาะจงมากขึ้น extend จากสไตล์พื้นฐาน สิ่งนี้จะทำให้ CSS ของคุณง่ายต่อการนำทางและบำรุงรักษา
- คำนึงถึง Specificity: Extend อาจส่งผลต่อ CSS specificity ตรวจสอบให้แน่ใจว่าสไตล์ที่คุณ extend มี specificity ที่ต้องการเพื่อหลีกเลี่ยงพฤติกรรมที่ไม่คาดคิด
- พิจารณา Mixins: Mixins (ที่มีให้ใน preprocessors) เป็นอีกทางเลือกหนึ่งของ Extend ซึ่งบางครั้งอาจมีความยืดหยุ่นมากกว่า โดยเฉพาะเมื่อต้องจัดการกับสไตล์ที่ต้องใช้พารามิเตอร์
- จัดทำเอกสารโค้ดของคุณ: จัดทำเอกสาร CSS ของคุณอย่างชัดเจน รวมถึงระบุว่า selectors ใด extend มาจาก selectors ใด เพื่อให้นักพัฒนาคนอื่น (และตัวคุณเองในอนาคต) เข้าใจโค้ดของคุณได้ง่ายขึ้น
ข้อควรระวังและข้อพิจารณาที่อาจเกิดขึ้น
- ปัญหาด้าน Specificity: `@extend` บางครั้งอาจนำไปสู่ปัญหา specificity ที่ไม่คาดคิดหากไม่ใช้อย่างระมัดระวัง ความเข้าใจใน CSS specificity เป็นสิ่งสำคัญอย่างยิ่งเมื่อทำงานกับ `@extend` เมื่อกฎหนึ่ง extend อีกกฎหนึ่ง selectors จะถูกจัดกลุ่มเข้าด้วยกัน ซึ่งอาจเปลี่ยนแปลง specificity ของกฎที่อาจไม่ปรากฏให้เห็นในทันที ควรทดสอบอย่างละเอียดเสมอหลังจากใช้ `extend` โดยเฉพาะในโปรเจกต์ขนาดใหญ่
- ขนาดไฟล์ที่เพิ่มขึ้น: แม้ว่า `@extend` จะมีเป้าหมายเพื่อลดความซ้ำซ้อน แต่ในบางสถานการณ์ มันอาจ *เพิ่ม* ขนาดไฟล์ CSS สุดท้ายได้ สิ่งนี้เกิดขึ้นเมื่อ selector ที่ถูก extend อย่างหนักถูกใช้ในหลาย ๆ ที่ คอมไพเลอร์จะทำซ้ำสไตล์ที่สืบทอดมาไปยัง selectors หลายตัว ทำให้เกิดความซ้ำซ้อนที่มากกว่าการประหยัดในตอนแรก ควรวิเคราะห์ CSS ที่คอมไพล์แล้วของคุณเพื่อให้แน่ใจว่า `@extend` ช่วยลดขนาดไฟล์จริง ๆ ไม่ใช่เพิ่มขึ้น
- ผลข้างเคียงที่ไม่คาดคิด: เมื่อ selector ถูก extend มันจะกลายเป็นส่วนหนึ่งของทุก selector ที่สืบทอดจากมัน สิ่งนี้อาจทำให้เกิดผลข้างเคียงที่ไม่คาดคิดหากสไตล์ที่สืบทอดมาไม่ได้รับการพิจารณาอย่างรอบคอบในบริบทของ selectors ที่ทำการ extend ควรทดสอบอย่างละเอียดเสมอและระวังความขัดแย้งของสไตล์ที่อาจเกิดขึ้น
- ความซับซ้อนในการดีบัก: การดีบัก CSS ที่ใช้ `@extend` อย่างหนักอาจซับซ้อนกว่าการดีบัก CSS แบบดั้งเดิม การติดตามที่มาของสไตล์บางอย่างอาจต้องไล่ดูการสืบทอดหลายระดับ ซึ่งอาจใช้เวลานานและสับสน ควรใช้เครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์และ CSS source maps อย่างมีประสิทธิภาพเพื่อช่วยในการดีบัก
- ข้อกังวลด้านการบำรุงรักษาจากการใช้งานมากเกินไป: แม้ว่า `@extend` จะช่วยปรับปรุงการบำรุงรักษาได้เมื่อใช้อย่างเหมาะสม แต่การใช้งานมากเกินไปอาจสร้างเครือข่ายความสัมพันธ์ที่ซับซ้อนซึ่งทำให้ CSS เข้าใจและแก้ไขได้ยากขึ้น ควรพยายามสร้างสมดุลระหว่างการนำโค้ดกลับมาใช้ใหม่และความชัดเจน
Extend vs. Mixins: การเลือกเครื่องมือที่เหมาะสม
ทั้ง Extend และ mixins (มีใน preprocessors อย่าง Sass และ Less) เป็นวิธีการนำโค้ด CSS กลับมาใช้ใหม่ แต่มีความแตกต่างในแนวทางและเหมาะกับสถานการณ์ที่แตกต่างกัน
Extend
- กลไก: สืบทอดชุดสไตล์ *ทั้งหมด* จาก selector อื่น โดยหลักการแล้วคือการจัดกลุ่ม selectors เข้าด้วยกันใน CSS ที่คอมไพล์แล้ว
- กรณีการใช้งาน: เหมาะสำหรับการแบ่งปันสไตล์พื้นฐานระหว่างองค์ประกอบหลาย ๆ อย่างที่คุณต้องการสร้างความเชื่อมโยงทางความหมาย (เช่น ปุ่มประเภทต่าง ๆ ที่ใช้สไตล์หลักร่วมกัน) เหมาะที่สุดเมื่อคุณต้องการคุณสมบัติทั้งหมดของคลาสที่ถูก extend โดยไม่มีการแก้ไข
- ผลลัพธ์ที่คอมไพล์: โดยทั่วไปจะให้ CSS ที่มีขนาดเล็กกว่า mixins เมื่อใช้อย่างมีประสิทธิภาพ เนื่องจากมีการทำซ้ำโค้ดน้อยกว่า
Mixins
- กลไก: รวม *สำเนา* ของกฎ CSS ภายใน mixin เข้าไปใน selector ที่เรียกใช้มัน อนุญาตให้มีพารามิเตอร์ (arguments) เพื่อปรับแต่งสไตล์ที่รวมเข้ามา
- กรณีการใช้งาน: เหมาะสำหรับส่วนของโค้ดที่ใช้ซ้ำได้ซึ่งคุณต้องการนำไปใช้กับองค์ประกอบหลายอย่างโดยมีการเปลี่ยนแปลงเล็กน้อย ยอดเยี่ยมสำหรับ vendor prefixes, การคำนวณที่ซับซ้อน และสไตล์ที่ต้องใช้พารามิเตอร์ (เช่น การสร้างความกว้างของคอลัมน์กริดที่แตกต่างกัน)
- ผลลัพธ์ที่คอมไพล์: อาจส่งผลให้ไฟล์ CSS มีขนาดใหญ่ขึ้นเนื่องจากการทำซ้ำของโค้ด โดยเฉพาะอย่างยิ่งหาก mixin มีกฎจำนวนมากและถูกเรียกใช้บ่อยครั้ง
ควรใช้อันไหนเมื่อไหร่?
- ใช้ Extend เมื่อ: คุณต้องการสร้างความสัมพันธ์ทางความหมายระหว่างองค์ประกอบต่าง ๆ โดยใช้สไตล์พื้นฐานร่วมกัน *โดยไม่มี* การแก้ไข และการปรับขนาดไฟล์ให้เล็กลงเป็นสิ่งสำคัญ
- ใช้ Mixins เมื่อ: คุณต้องการรวมส่วนย่อยของโค้ดที่ใช้ซ้ำได้ซึ่งมีการเปลี่ยนแปลง จัดการกับ vendor prefixes ทำการคำนวณที่ซับซ้อน หรือปรับแต่งสไตล์ที่รวมเข้ามาโดยใช้พารามิเตอร์
บางครั้ง การผสมผสานระหว่าง Extend และ mixins เป็นแนวทางที่มีประสิทธิภาพที่สุด ตัวอย่างเช่น คุณอาจใช้ Extend เพื่อสร้างสไตล์พื้นฐาน แล้วใช้ mixins เพื่อเพิ่มการเปลี่ยนแปลงหรือการปรับปรุงที่เฉพาะเจาะจง
ตัวอย่างและการพิจารณาทั่วโลก
หลักการของ CSS Extend และการนำสไตล์กลับมาใช้ใหม่สามารถนำไปใช้ได้ทั่วโลกในภูมิภาคและวัฒนธรรมที่แตกต่างกัน อย่างไรก็ตาม เมื่อออกแบบสำหรับผู้ชมทั่วโลก สิ่งสำคัญคือต้องพิจารณา:
- Typography: ภาษาต่าง ๆ ต้องการตระกูลฟอนต์และขนาดที่แตกต่างกัน ใช้ CSS variables หรือ mixins เพื่อจัดการการตั้งค่า typography ตามภาษาของเนื้อหา ตัวอย่างเช่น เว็บไซต์ที่รองรับทั้งภาษาอังกฤษและภาษาอาหรับอาจใช้ขนาดฟอนต์สำหรับหัวข้อที่แตกต่างกันเพื่อรองรับลักษณะทางสายตาของแต่ละสคริปต์
- Layout: บางภาษา เช่น ภาษาอาหรับและฮิบรู เขียนจากขวาไปซ้าย (RTL) ใช้ CSS logical properties (เช่น `margin-inline-start` แทน `margin-left`) และแอตทริบิวต์ทิศทาง (`dir="rtl"`) เพื่อให้แน่ใจว่าเลย์เอาต์ของคุณปรับให้เข้ากับภาษา RTL ได้อย่างถูกต้อง สามารถใช้ CSS Extend เพื่อแชร์สไตล์เลย์เอาต์ทั่วไปในขณะที่อนุญาตให้มีการเขียนทับเฉพาะสำหรับ RTL
- สี: สีอาจมีความสัมพันธ์ทางวัฒนธรรมที่แตกต่างกันในส่วนต่าง ๆ ของโลก โปรดคำนึงถึงความสัมพันธ์เหล่านี้เมื่อเลือกสีสำหรับเว็บไซต์ของคุณ ตัวอย่างเช่น สีขาวเกี่ยวข้องกับการไว้ทุกข์ในบางวัฒนธรรมเอเชีย ในขณะที่มักเกี่ยวข้องกับความบริสุทธิ์และการเฉลิมฉลองในวัฒนธรรมตะวันตก
- ไอคอน: ตรวจสอบให้แน่ใจว่าไอคอนของคุณเหมาะสมกับวัฒนธรรมและไม่เป็นการดูหมิ่นหรือกีดกันผู้ใช้จากภูมิภาคต่าง ๆ โดยไม่ได้ตั้งใจ หลีกเลี่ยงการใช้สัญลักษณ์ที่อาจมีความหมายแตกต่างกันในวัฒนธรรมที่แตกต่างกัน
- การเข้าถึง (Accessibility): ปฏิบัติตามแนวทางการเข้าถึง (WCAG) เพื่อให้แน่ใจว่าเว็บไซต์ของคุณสามารถใช้งานได้โดยผู้พิการ ซึ่งรวมถึงการให้ข้อความทางเลือกสำหรับรูปภาพ การใช้ HTML เชิงความหมายที่เหมาะสม และการตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณสามารถนำทางได้โดยใช้คีย์บอร์ด
ตัวอย่าง:
ลองจินตนาการถึงแพลตฟอร์มอีคอมเมิร์ซระดับโลกที่ขายสินค้าทั้งในยุโรปและเอเชีย แพลตฟอร์มนี้ใช้ CSS Extend เพื่อสร้างสไตล์ปุ่มพื้นฐาน แต่จากนั้นใช้ mixins เพื่อปรับแต่งสีของปุ่มตามภูมิภาค ในยุโรป สีปุ่มหลักคือสีน้ำเงิน ในขณะที่ในเอเชียเป็นสีเขียว ซึ่งสะท้อนถึงความชอบและความสัมพันธ์ของสีที่แตกต่างกันในภูมิภาคเหล่านั้น
// Base button style
.button {
padding: 10px 20px;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}
// Mixin for setting button background color
@mixin button-background-color($color) {
background-color: $color;
}
// European button style
.european-button {
@extend .button;
@include button-background-color(#007bff); // Blue
}
// Asian button style
.asian-button {
@extend .button;
@include button-background-color(#28a745); // Green
}
สรุป
CSS Extend เป็นเทคนิคที่ทรงพลังสำหรับการเขียน CSS ที่มีประสิทธิภาพ บำรุงรักษาง่าย และขยายขนาดได้ ด้วยความเข้าใจในหลักการและแนวทางปฏิบัติที่ดีที่สุด คุณสามารถสร้างโค้ดเบส CSS ที่มีการจัดระเบียบและจัดการได้ง่ายขึ้น แม้ว่า CSS แบบดั้งเดิมจะไม่มีคำสั่ง `@extend` ที่เทียบเท่าโดยตรง แต่แนวคิดเช่น CSS variables และการใช้ cascade อย่างมีกลยุทธ์สามารถช่วยให้ได้ผลลัพธ์ที่คล้ายคลึงกัน อย่าลืมพิจารณาความต้องการเฉพาะของโปรเจกต์ของคุณ และจุดแข็งและจุดอ่อนของแต่ละแนวทางเมื่อเลือกเครื่องมือที่เหมาะสมกับงาน และเมื่อออกแบบสำหรับผู้ชมทั่วโลก ควรคำนึงถึงความแตกต่างทางวัฒนธรรมเสมอและตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณสามารถเข้าถึงได้และครอบคลุมผู้ใช้ทุกคน โอบรับพลังของ CSS Extend (หรือทางเลือกอื่น ๆ) เพื่อปลดล็อกประสิทธิภาพและสร้างเว็บที่ดีขึ้น
อ่านเพิ่มเติม
- เอกสาร Sass: https://sass-lang.com/documentation/at-rules/extend
- เอกสาร Less: https://lesscss.org/features/#extend-feature
- MDN Web Docs เกี่ยวกับ CSS Variables: https://developer.mozilla.org/en-US/docs/Web/CSS/var()
- Web Accessibility Initiative (WAI): https://www.w3.org/WAI/